<template>
  <div style="background-color: #ffffff;padding:30px;">

    <div>
      <el-popover :visible="visible" placement="right-end" :width="600">
        <select-area :selected="selected" :disable="disable" @cancel="handleCancel" @confirm="handleConfirm" @confirm1="confirm1"> </select-area>
        <template #reference>
          <el-button  plain @click="visible = true">选择</el-button>
        </template>
      </el-popover>
      <el-button  type="danger" plain @click="selected = []" >清除</el-button>
    </div>
    <div class="tag-box" v-if="selected.length" >
      <el-tag  :closable="closable" style="margin:2px;" v-for="(tag,index) in selected" :key="index" @close="handleClose(index,tag)" >{{tag.name}}</el-tag>
    </div>

    <div class="dir-left-nowrap">
      <el-card class="area-box" shadow="never">
        <div :id="'#id_' + item.id" class="el-checkbox item-box" v-for="(item, index) in dataTree" :key="index"
             >
          <span class="el-checkbox__label" :class="pIndex === index ? 'check-active':''">{{ item.name }}</span>
        </div>
      </el-card>
      <el-card class="area-box" shadow="never" >
        <template v-for="(pItem, pIndex) in dataTree">
          <div :key="pIndex" v-if="pItem.list && pItem.list.length" :id="'#pid_' + pItem.id + '_'+ pIndex">
            <div  >
              <div :key="cIndex" v-for="(cItem, cIndex) in pItem.list">
                  {{cItem.name}}
              </div>
            </div>
          </div>
        </template>
      </el-card>
      <el-card class="area-box" shadow="never" >
        <template v-for="pItem in dataTree">
          <template v-if="pItem.list && pItem.list.length" >
            <template v-for="(cItem,cIndex) in pItem.list" >
              <div :key="cIndex" v-if="cItem.list && cItem.list.length" :id="'#pid_' + cItem.id + '_'+ cIndex">
                <div :key="dIndex" v-for="(dItem, dIndex) in cItem.list">
                  {{dItem.name}}
                </div>
              </div>
            </template>
          </template>
        </template>
      </el-card>
    </div>
    <el-upload
      v-model:file-list="liss"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      list-type="picture-card"
    >
      <el-button>dfdf</el-button>
    </el-upload>
  </div>
</template>

<script>

export default {
  name: "test2.vue",
  props: {
    radio: {
      type: Boolean,
      default: false
    },
    all: Boolean,
  },
  data(){
    return {
      visible:false,
      value:[],
      closable:true,
      selected:[],
      disable:[],
      dataTree:[]
    }
  },
  methods:{
    handleCancel(){
      this.visible = false
    },
    handleConfirm(data){
      this.visible = false
      this.selected = data
    },
    handleClose(index){
      this.selected.splice(index,1)
    },
    confirm1(data){
      console.log('--------------dddddd',data)
      this.dataTree = data
    },
  }
}
</script>

<style scoped lang="scss">

.area-box::-webkit-scrollbar {
  width: 8px;
}

.tag-box{
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  padding: 10px 4px;
  max-width: 500px;
  max-height: 200px;
  overflow:auto;
  margin-top: 10px;
  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 7px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-track:hover {
    background-color: #f8fafc;
  }
}

.area-box {
  max-height: 250px;
  overflow-y: auto;
  margin-right: 10px;
  width: 250px;

  .check-active {
    color: #79bbff;
  }

  .item-box {
    margin: 0px 0px 2px;
    display: block;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 7px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-track:hover {
    background-color: #f8fafc;
  }
}
</style>
